<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>用户登录</title>
<link rel="stylesheet" type="text/css" href="/css/admin.css">
<head th:include="include :: header"></head>
<body>
<script src="/js/jquery.min.js?v=2.1.4"></script>
<div class="mainbg">
    <div class="loginbox">
        <img src="../img/logo.png" class="logo">
        <div class="logcont">
            <h1>用户登录</h1>
            <form id="signupForm">
                <div id="main1" class="logbd">
                    <dl class="block">
                        <div class="formcont">
                            <input name="username" type="text" class="bdbox name " placeholder="账号" required id="username">
                        </div>
                        <div class="formcont">
                            <input name="password" type="password" class="bdbox mm" id="password" placeholder="输入密码">
                        </div>

                        <div class="row formcont">
                            <div class="col-xs-6 pull_left">
                                <div class="form-group">
                                    <input class="form-control" style="margin-top: 5px" type="tel" name="verify" id="verify" placeholder="请输入验证码" maxlength="4">
                                </div>
                            </div>
                            <div class="col-xs-6 pull_left">
                                <a href="javascript:void(0);" rel="external nofollow" title="点击更换验证码">
                                    <img id="imgVerify" src="" alt="更换验证码" height="36" width="100%" onclick="getVerify(this);">
                                </a>
                            </div>
                        </div>

                        <div class="formcont">
                            <input class="btn_big" id="btn" value="登 录" type="button" style="height:40px;font-size: 18px " onclick="loginSubmit()">
                            <!--<input type="submit" style="display:none;" id="login" name="login">-->
                        </div>

                        <!--<div class="formcont">
                            <span class="fr">没有账号？<a href="/register">注册</a></span>
                        </div>-->
                    </dl>
                </div>
            </form>

        </div>
    </div>
</div>
<div th:include="include :: footer"></div>
<script>
    $(document).ready(function () {
        $("#imgVerify").click()
    });

    $("#verify").keydown(function(e){
        if(e.keyCode == 13){
            $("#btn").click();
        }
    });

    function loginSubmit() {
        var username = document.getElementById("username").value;
        if (username == '') {
            layer.msg("用户名不能为空！");
            return;
        }
        if (username.indexOf(" ")!=-1) {
            layer.msg("用户名中不能含有空格！");
            return;
        }

        var password = document.getElementById("password").value;
        if (password == '') {
            layer.msg("密码不能为空！");
            return;
        }

        var verify=document.getElementById("verify").value;
        if (verify == '') {
            layer.msg("验证码不能为空！");
            return;
        }
        $.ajax({
            type: "POST",
            url: ctx + "/login",
            data: $('#signupForm').serialize(),
            success: function (r) {
                if (r.code == 0) {
                    var index = layer.load(1, {
                        shade: [0.1, '#fff'] //0.1透明度的白色背景
                    });
                    parent.location.href = '/index';
                } else {
                    layer.msg(r.msg);
                }
            },
        });
    }


    /**
     * 防止页面后退
     */
    $(function() {
        if (window.history && window.history.pushState) {
            $(window).on('popstate', function () {
                window.history.pushState('forward', null, '#');
                window.history.forward(1);
            });
        }
        window.history.pushState('forward', null, '#'); //在IE中必须得有这两行
        window.history.forward(1);
    });

    //获取验证码
    function getVerify(obj) {
        obj.src = "/getVerify?" + Math.random();
        console.log(obj)
    }
</script>
</body>
</html>